<template>
    <view class="container">
        <!-- 搜索栏 -->
        <view class="search-bar">
            <view class="iconfont icon-sousuo search-icon"></view>
            <input class="search-input" placeholder="请输入地区名" />
        </view>

        <view class="content">
            <!-- 左侧省份列表导航 -->
            <view class="left-sidebar">
                <view class="sidebar-item" v-for="(province, index) in provinces" :key="index"
                    @click="filterCities(province)">
                    <text :class="{ active: activeProvince === province }">{{ province }}</text>
                </view>
            </view>

            <!-- 右侧城市内容 -->
            <view class="right-content">
                <!-- 当前定位信息 -->
                <view v-if="activeProvince === '推荐'" class="location-section">
                    <text class="section-title">当前定位</text>
                    <view class="current-location">
                        <view class="iconfont icon-location-fill location-icon"></view>
                        <text class="location-city">{{ currentCity }}</text>
                        <text class="gps-info">GPS定位</text>
                    </view>
                </view>

                <!-- 热门城市或省份对应城市列表 -->
                <view class="cities-section">
                    <text class="section-title">{{ activeProvince === '推荐' ? '热门地区' : '所有地区' }}</text>
                    <view class="city-grid">
                        <view class="city-item" v-for="(city, index) in displayedCities" :key="index"
                            @click="selectCity(city)">
                            <text>{{ city }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                currentCity: '定位中...', // 默认定位城市
                hotCities: [
                    '杭州市','上海市','北京市','武汉市','天津市','西安市',
                    '石家庄市','兰州市','合肥市','海口市','成都市','济南市',
                    '乌鲁木齐市','拉萨市','郑州市','长沙市','福州市','沈阳市',
                    '太原市','呼和浩特市','银川市','西宁市','昆明市','长春市',
                    '哈尔滨市','南京市','南宁市','广州市','南昌市','贵阳市'
                ],
                provinces: [
                    '推荐','北京','上海','天津','重庆','河北','山西',
                    '内蒙古','辽宁','吉林','黑龙江','江苏','浙江','安徽',
                    '福建','江西','山东','河南','湖北','湖南','广东',
                    '广西','海南','四川','贵州','云南','西藏','陕西',
                    '甘肃','青海','宁夏','新疆'
                ],
                provinceCities: {
                    '北京': ['北京市'],
                    '上海': ['上海市'],
                    '天津': ['天津市'],
                    '重庆': ['重庆市'],
                    '河北': ['石家庄市','唐山市','秦皇岛市','邯郸市','邢台市','保定市','张家口市','承德市','沧州市','廊坊市','衡水市'],
                    '山西': ['太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市'],
                    '内蒙古': ['呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市','兴安盟','锡林郭勒盟','阿拉善盟'],
                    '辽宁': ['沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市'],
                    '吉林': ['长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边朝鲜族自治州'],
                    '黑龙江': ['哈尔滨市','齐齐哈尔市','鸡西市','鹤岗市','双鸭山市','大庆市','伊春市','佳木斯市','七台河市','牡丹江市','黑河市','绥化市','大兴安岭地区'],
                    '江苏': ['南京市','无锡市','徐州市','常州市','苏州市','南通市','连云港市','淮安市','盐城市','扬州市','镇江市','泰州市','宿迁市'],
                    '浙江': ['杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市'],
                    '安徽': ['合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','六安市','亳州市','池州市','宣城市'],
                    '福建': ['福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市'],
                    '江西': ['南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市'],
                    '山东': ['济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市'],
                    '河南': ['郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','濮阳市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市','济源市'],
                    '湖北': ['武汉市','黄石市','十堰市','宜昌市','襄阳市','鄂州市','荆门市','孝感市','荆州市','黄冈市','咸宁市','随州市','恩施土家族苗族自治州','仙桃市','潜江市','天门市','神农架林区'],
                    '湖南': ['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市','湘西土家族苗族自治州'],
                    '广东': ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'],
                    '广西': ['南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市'],
                    '海南': ['海口市','三亚市','三沙市','儋州市','五指山市','琼海市','文昌市','万宁市','东方市','定安县','屯昌县','澄迈县','临高县','白沙黎族自治县','昌江黎族自治县','乐东黎族自治县','陵水黎族自治县','保亭黎族苗族自治县','琼中黎族苗族自治县'],
                    '四川': ['成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市','阿坝藏族羌族自治州','甘孜藏族自治州','凉山彝族自治州'],
                    '贵州': ['贵阳市','六盘水市','遵义市','安顺市','毕节市','铜仁市','黔西南布依族苗族自治州','黔东南苗族侗族自治州','黔南布依族苗族自治州'],
                    '云南': ['昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市','楚雄彝族自治州','红河哈尼族彝族自治州','文山壮族苗族自治州','西双版纳傣族自治州','大理白族自治州','德宏傣族景颇族自治州','怒江傈僳族自治州','迪庆藏族自治州'],
                    '西藏': ['拉萨市','日喀则市','昌都市','林芝市','山南市','那曲市','阿里地区'],
                    '陕西': ['西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市'],
                    '甘肃': ['兰州市','嘉峪关市','金昌市','白银市','天水市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市','临夏回族自治州','甘南藏族自治州'],
                    '青海': ['西宁市','海东市','海北藏族自治州','黄南藏族自治州','海南藏族自治州','果洛藏族自治州','玉树藏族自治州','海西蒙古族藏族自治州'],
                    '宁夏': ['银川市','石嘴山市','吴忠市','固原市','中卫市'],
                    '新疆': ['乌鲁木齐市','克拉玛依市','吐鲁番市','哈密市','昌吉回族自治州','博尔塔拉蒙古自治州','巴音郭楞蒙古自治州','阿克苏地区','克孜勒苏柯尔克孜自治州','喀什地区','和田地区','伊犁哈萨克自治州','塔城地区','阿勒泰地区','石河子市','阿拉尔市','图木舒克市','五家渠市','铁门关市']
                },
                activeProvince: '推荐', // 当前选中的省份
                displayedCities: [] // 当前显示的城市列表
            };
        },
        methods: {
            selectCity(city) {
                this.currentCity = city;
                this.f.storage('address',this.currentCity)
                uni.setStorage({
                    key: 'address',
                    data: city,
                    success: () => {
                        uni.navigateBack(); // 返回首页
                    }
                });
            },
            filterCities(province) {
                this.activeProvince = province;
                this.displayedCities = province === '推荐' ? this.hotCities : (this.provinceCities[province] || []);
            },
            getLocation() {
                uni.getLocation({
                    type: 'gcj02',
                    success: (location) => {
                        this.reverseGeocode(location.latitude,location.longitude);
                    },
                    fail: () => {
                        this.currentCity = "定位失败";
                    }
                });
            },
            reverseGeocode(lat,lng) {
                const apiKey = '3LQBZ-JOZ3F-QVRJY-JQCQQ-6NHNS-A7BBV';
                uni.request({
                    url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=${apiKey}`,
                    success: (res) => {
                        if (res.data.status === 0) {
                            this.currentCity = res.data.result.address_component.city || "未知城市";
                            this.f.storage('address',this.currentCity)
                        } else {
                            this.currentCity = "定位失败";
                        }
                    },
                    fail: () => {
                        this.currentCity = "定位失败";
                    }
                });
            }
        },
        mounted() {
            this.getLocation(); // 页面加载时自动获取定位
            this.filterCities(this.activeProvince); // 初始化显示热门城市
        }
    };
</script>

<style>
    .container {
        background-color: #f5f5f5;
        padding: 10rpx 20rpx;
    }

    /* 搜索栏 */
    .search-bar {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 10rpx 20rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }

    .search-icon {
        font-size: 30rpx;
        color: #888;
    }

    .search-input {
        flex: 1;
        margin-left: 10rpx;
        font-size: 28rpx;
        color: #333;
        border: none;
    }

    /* 主体内容 */
    .content {
        display: flex;
    }

    /* 左侧省份导航 */
    .left-sidebar {
        width: 20%;
        background-color: #f8f8f8;
        padding: 10rpx;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        height: calc(100vh - 120rpx);
        /* 设置合适的高度以支持滚动 */
    }

    .sidebar-item {
        padding: 15rpx 10rpx;
    }

    .sidebar-item text {
        font-size: 26rpx;
        color: #333;
    }

    .active {
        color: #48a473;
        font-weight: bold;
    }

    /* 右侧内容 */
    .right-content {
        width: 80%;
        padding: 10rpx;
        background-color: #fff;
        border-radius: 10rpx;
        overflow-y: auto;
        /* 确保右侧内容不滚动 */
    }

    /* 当前定位 */
    .location-section {
        padding: 20rpx;
        border-bottom: 1px solid #f0f0f0;
    }

    .section-title {
        font-size: 26rpx;
        color: #666;
    }

    .current-location {
        display: flex;
        align-items: center;
        margin-top: 10rpx;
    }

    .location-icon {
        font-size: 30rpx;
        color: #48a473;
    }

    .location-city {
        font-size: 28rpx;
        font-weight: bold;
        margin-left: 10rpx;
    }

    .gps-info {
        font-size: 24rpx;
        color: #888;
        margin-left: 10rpx;
    }

    /* 热门城市和省份对应城市 */
    .cities-section {
        padding: 20rpx;
    }

    .city-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
    }

    .city-item {
        width: 30%;
        padding: 20rpx 0;
        text-align: center;
        background-color: #f9f9f9;
        border: 1rpx solid #ddd;
        border-radius: 10rpx;
        font-size: 28rpx;
        color: #333;
    }
</style>